<template>
	<view class="setselfinfo">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'个人信息'"></Hearder>
		<!-- #endif -->
		<view class="bgbottom">
			<view class="authentication" @click="uploadload">
				<view class="left">头像</view>
				<view class="right">
					<image :src="userinfo.avatarUrl" class="uploadimg"></image>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="authentication"  @click="clonenickname">
				<view class="left">昵称</view>
				<view class="right">
					<text>{{userinfo.nickname}}</text>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="authentication" @click="toPage('/pages/login/xgpassword?type=3')">
				<view class="left" v-if="userinfo.phone==''">绑定手机号</view>
				<view class="left" v-if="userinfo.phone!=''">修改手机号</view>
				<view class="right">
					<text>{{userinfo.phone}}</text>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="authentication" style="border: none;" @click="toPage('/pages/login/xgpassword')">
				<view class="left">登录密码</view>
				<view class="right">
					<text>修改密码</text>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
		</view>
		<u-popup mode="center" :round="5" :show="nicknameflag" @close="close">
			<view class="kuangphone">
				<view class="phonetitle">修改昵称</view>
				<view class="itemList">
					<input type="text" placeholder="请输入昵称" v-model="nickName"/>
				</view>
				<view class="regisBtn" @click="bdnickname">确定修改</view>
			</view>
		</u-popup>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				phone:'',
				userinfo:{},
				nicknameflag:false,
				nickName:'',
				showLogin:false
			}
		},
		onShow() {
			this.getinit()
		},
		methods:{
			getinit(){
				this.request('/member/getMemberDetails').then(res => {
					if(res.data.code==-500){
						this.showLogin=true
					}
					if(res.data.code==1){
						this.userinfo=res.data.data
					}
				})
			},
			outline(){
				uni.removeStorageSync("TOKEN")
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			loginhidden(data){
				this.showLogin=data
			},
			close(){
				this.nicknameflag = false
			},
			uploadload(){
				var that=this
				uni.chooseImage({
				  count: 1,
				  sourceType: ['album'],
				  success:(res) => {
					uni.uploadFile({
						// #ifdef H5
						url:'/upload/image',
						// #endif
						// #ifndef H5
						url:that.$Config.url + '/upload/image',
						// #endif
						filePath: res.tempFilePaths[0],
						name: 'iFile',
						header:{
							token: uni.getStorageSync('TOKEN')
						},
						success: res => {
							this.request('/member/editMember',{avatarUrl:JSON.parse(res.data).data.file_path}).then(res => {
								if(res.data.code==1){
									this.getinit()
									this.$tip(res.data.msg)
								}else{
									this.$tip(res.data.msg)
								}
							})
						}
					})
				  }
				})
			},
			clonenickname(){
				this.nicknameflag=!this.nicknameflag
			},
			bdnickname(){
				if(this.nickName==''){
					this.$tip("请先输入要修改的昵称")
					return
				}
				this.request('/member/editMember',{name:this.nickName}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
						this.getinit()
						this.nickName=''
						this.nicknameflag=false
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.setselfinfo{
		min-height: 100%;
		background: #fff;
		.authentication{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 4%;
			height: 99rpx;
			line-height: 99rpx;
			border-bottom: 1rpx solid $uni-background-color;
			&:first-of-type{
				height: 142rpx;
				line-height: 142rpx;
			}
			.right{
				.u-icon{
					right: -10rpx;
				}
				text{
					font-size: 28rpx;
					color: #999;
				}
				.uploadimg{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
		}
		.kuangphone{
			position: relative;
			top: 50%;
			width: 540rpx;
			transform: translateY(-50%);
			padding-bottom: 50rpx;
			.phonetitle{
			  font-size: 32rpx;
			  font-weight: 500;
			  text-align: center;
			  padding: 30rpx 0;
			}
			.itemList{
				width: 90%;
				margin-left: 5%;
				overflow: hidden;
				height: 68rpx;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				border: 2rpx solid #eee;
				input{
					  width: 100%;
					  height: 100%;
					  margin-left: 20rpx;
					  font-size: 30rpx;
				}
				>image{
					width: 50rpx;
					height: 50rpx;
					margin-left: 20rpx;
				}
			}
			.regisBtn{
				margin: 40rpx 10% 0;
				height: 80rpx;
				background: $uni-item-color;
				text-align: center;
				line-height: 80rpx;
				border-radius: 80rpx;
				color: #fff;
			}
		}
	}
</style>